<template>
  <div class="pagination-container" v-if="total > 0">
    <div class="pagination-info">
      <span>共 {{ total }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页</span>
    </div>
    
    <div class="pagination-controls">
      <!-- 上一页按钮 -->
      <lay-button 
        size="sm" 
        :disabled="currentPage <= 1"
        @click="handlePrevPage"
        class="pagination-btn"
      >
        <lay-icon type="layui-icon-left"></lay-icon>
        上一页
      </lay-button>

      <!-- 页码按钮 -->
      <div class="page-numbers">
        <!-- 第一页 -->
        <lay-button 
          v-if="showFirstPage"
          size="sm"
          :type="currentPage === 1 ? 'primary' : 'default'"
          @click="handlePageChange(1)"
          class="page-btn"
        >
          1
        </lay-button>

        <!-- 省略号 -->
        <span v-if="showStartEllipsis" class="ellipsis">...</span>

        <!-- 中间页码 -->
        <lay-button 
          v-for="page in visiblePages"
          :key="page"
          size="sm"
          :type="currentPage === page ? 'primary' : 'default'"
          @click="handlePageChange(page)"
          class="page-btn"
        >
          {{ page }}
        </lay-button>

        <!-- 省略号 -->
        <span v-if="showEndEllipsis" class="ellipsis">...</span>

        <!-- 最后一页 -->
        <lay-button 
          v-if="showLastPage"
          size="sm"
          :type="currentPage === totalPages ? 'primary' : 'default'"
          @click="handlePageChange(totalPages)"
          class="page-btn"
        >
          {{ totalPages }}
        </lay-button>
      </div>

      <!-- 下一页按钮 -->
      <lay-button 
        size="sm" 
        :disabled="currentPage >= totalPages"
        @click="handleNextPage"
        class="pagination-btn"
      >
        下一页
        <lay-icon type="layui-icon-right"></lay-icon>
      </lay-button>

      <!-- 页面跳转 -->
      <div class="page-jumper">
        <span>跳转到</span>
        <lay-input 
          v-model="jumpPage" 
          size="sm" 
          style="width: 60px; margin: 0 5px;"
          @keyup.enter="handleJumpPage"
          type="number"
          :min="1"
          :max="totalPages"
        />
        <span>页</span>
        <lay-button 
          size="sm" 
          @click="handleJumpPage"
          style="margin-left: 5px;"
        >
          确定
        </lay-button>
      </div>

      <!-- 每页显示数量选择 -->
      <div class="page-size-selector">
        <span>每页</span>
        <lay-select 
          v-model="currentPageSize" 
          size="sm" 
          style="width: 80px; margin: 0 5px;"
          @change="handlePageSizeChange"
        >
          <lay-select-option 
            v-for="size in pageSizeOptions" 
            :key="size" 
            :value="size"
          >
            {{ size }}
          </lay-select-option>
        </lay-select>
        <span>条</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// Props 定义
interface PaginationProps {
  total: number           // 总记录数
  page?: number          // 当前页码
  pageSize?: number      // 每页显示数量
  pageSizeOptions?: number[]  // 每页显示数量选项
  showSizeChanger?: boolean   // 是否显示每页数量选择器
  showQuickJumper?: boolean   // 是否显示快速跳转
  showTotal?: boolean         // 是否显示总数信息
  maxVisiblePages?: number    // 最大显示页码数量
}

const props = withDefaults(defineProps<PaginationProps>(), {
  page: 1,
  pageSize: 10,
  pageSizeOptions: () => [10, 20, 50, 100],
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: true,
  maxVisiblePages: 7
})

// Emits 定义
const emit = defineEmits<{
  change: [page: number, pageSize: number]
  'update:page': [page: number]
  'update:pageSize': [pageSize: number]
}>()

// 响应式数据
const currentPage = ref(props.page)
const currentPageSize = ref(props.pageSize)
const jumpPage = ref('')

// 计算属性
const totalPages = computed(() => Math.ceil(props.total / currentPageSize.value))

// 可见页码计算
const visiblePages = computed(() => {
  const pages: number[] = []
  const maxVisible = props.maxVisiblePages
  const current = currentPage.value
  const total = totalPages.value

  if (total <= maxVisible) {
    // 总页数小于等于最大显示数，显示所有页码
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // 计算显示范围
    let start = Math.max(2, current - Math.floor((maxVisible - 2) / 2))
    let end = Math.min(total - 1, start + maxVisible - 3)
    
    // 调整起始位置
    if (end - start < maxVisible - 3) {
      start = Math.max(2, end - maxVisible + 3)
    }

    for (let i = start; i <= end; i++) {
      pages.push(i)
    }
  }

  return pages
})

// 是否显示第一页
const showFirstPage = computed(() => {
  return totalPages.value > 1 && (visiblePages.value.length === 0 || visiblePages.value[0] > 2)
})

// 是否显示最后一页
const showLastPage = computed(() => {
  return totalPages.value > 1 && (visiblePages.value.length === 0 || visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1)
})

// 是否显示开始省略号
const showStartEllipsis = computed(() => {
  return visiblePages.value.length > 0 && visiblePages.value[0] > 2
})

// 是否显示结束省略号
const showEndEllipsis = computed(() => {
  return visiblePages.value.length > 0 && visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1
})

// 监听 props 变化
watch(() => props.page, (newPage) => {
  currentPage.value = newPage
})

watch(() => props.pageSize, (newPageSize) => {
  currentPageSize.value = newPageSize
})

// 方法
const handlePrevPage = () => {
  if (currentPage.value > 1) {
    handlePageChange(currentPage.value - 1)
  }
}

const handleNextPage = () => {
  if (currentPage.value < totalPages.value) {
    handlePageChange(currentPage.value + 1)
  }
}

const handlePageChange = (page: number) => {
  if (page >= 1 && page <= totalPages.value && page !== currentPage.value) {
    currentPage.value = page
    emit('update:page', page)
    emit('change', page, currentPageSize.value)
  }
}

const handleJumpPage = () => {
  const page = parseInt(jumpPage.value)
  if (!isNaN(page) && page >= 1 && page <= totalPages.value) {
    handlePageChange(page)
    jumpPage.value = ''
  }
}

const handlePageSizeChange = (newPageSize: number) => {
  currentPageSize.value = newPageSize
  // 调整当前页码，确保不超出范围
  const newTotalPages = Math.ceil(props.total / newPageSize)
  if (currentPage.value > newTotalPages) {
    currentPage.value = newTotalPages || 1
  }
  
  emit('update:pageSize', newPageSize)
  emit('change', currentPage.value, newPageSize)
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 16px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
}

.ellipsis {
  padding: 0 4px;
  color: #999;
  font-size: 14px;
}

.page-jumper {
  display: flex;
  align-items: center;
  margin-left: 16px;
  font-size: 14px;
  color: #666;
}

.page-size-selector {
  display: flex;
  align-items: center;
  margin-left: 16px;
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .pagination-controls {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .page-jumper,
  .page-size-selector {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .page-numbers {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination-btn {
    font-size: 12px;
  }
  
  .page-btn {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }
}
</style>